<template>
<tbody>
	<tr v-for="(prop, index) in specs.specpropertyList" :key="index">
    <td v-if="index == 0" :rowspan="specLength">
      {{specs.specpropertyName}}
    </td>
    <td v-if="index == 0" :rowspan="specLength">
      <w-input style="width: 80px;" rule="isEmpty|onlyInt"  error="必填|格式错误" v-model="specs.specpropertyCrowdSum" :disabled="readonly"></w-input>&nbsp;件
    </td>
    <td>{{prop.specpropertyName}}</td>
    <td>
      <w-input style="width: 80px;" rule="isEmpty|onlyInt"  error="必填|格式错误" v-model="prop.specpropertySmallCount" :disabled="readonly"></w-input>&nbsp;件
    </td>
    <!-- 颜色已拼量 -->
    <td v-if="index == 0 && already" :rowspan="specLength">
      {{specs.checkOutCount || specs.colorSum || 0}}&nbsp;件
    </td>
    <!-- 现货，展示商品数量 -->
    <td v-if="count && goodsType == '1'">
      <w-input style="width: 80px;" rule="isEmpty|onlyInt"  error="必填|格式错误" v-model="prop.specpropertyInventCount" :disabled="readonly"></w-input>&nbsp;件
    </td>
  </tr>
</tbody>
</template>

<script>
export default {
  props: {
    specs: {
      type: Object,
      default: () => { return {} }
    },
    index: {
      type: Number,
      default: 0
    },
    readonly: {
      type: Boolean,
      default: false
    },
    already: {
      type: Boolean,
      default: false
    },
    goodsType: [Number, String], // 商品类型
    // 现货商品，需每个sku输入商品数量
    count: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    specLength() {
      // 如果属性没有值
      if (!this.specs.specpropertyList || this.specs.specpropertyList.length == 0) {
        return 1
      }
      return this.specs.specpropertyList.length
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
tbody {
  tr {
    height: 50px;
    margin: 5px;
    td {
      text-align: center;
      &:nth-child(1) {
        width: 10%;
      }
      &:nth-child(2) {
        width: 15%;
      }
      &:nth-child(3) {
        width: 10%;
      }
      &:nth-child(4) {
        width: 20%;
      }
      &:nth-child(5) {
        width: 20%;
      }
      &:nth-child(6) {
        width: 15%;
      }
      .delect {
        color: #f00384;
        cursor: pointer;
      }
    }
  }
  .delect-td {
    width: 6%;
    text-align: left;
  }
}
</style>